<template>
  <el-dialog
    v-model="dialogVisible"
    class="custom-dialog"
    width="631px"
    @closed="handleDialogClose"
  >
    <div class="dialog-content">
      <div class="info">
        <div class="title">{{ pointName }}</div>
        <div class="time">{{ timeData.actuallyTime }}</div>
      </div>
      <div class="dialog-content-echart">
        <div class="label-title">实况信息</div>
        <div class="content-top">
          <div
            class="top-item"
            v-for="(item, index) in informationListTwo"
            :key="index"
          >
            <div class="left">
              <div :class="[`icon${index}`]"></div>
              <div class="value">{{ item.value }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
            <div
              class="line"
              v-if="index != informationListTwo.length - 1"
            ></div>
          </div>
        </div>
        <div class="label-title-two">近24小时历史实况</div>
        <div class="content-tab">
          <div class="tab-left">
            <div
              v-for="(item, index) in chartType"
              :key="index"
              :class="[filterActive == item.detailKey ? 'echartsActive' : '']"
              @click="echartsFilter(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="tab-right" v-if="isShow('actualMonitoring:download')">
            <div>
              <img @click="download" src="../images/download.png" alt="" />
            </div>
          </div>
        </div>
        <div class="content-echarts" v-loading="chartLoading">
          <VChart ref="chartRef" class="chart-content" :option="chartOption" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import VChart from 'vue-echarts'
import apiList from '@/pages/integrated-monitoring/api/api'
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'
const monitoringStore = useMonitoringStore()
const baseLeafletMapStore = useBaseLeafletMapStore()
const permissions = localStorage.getItem('userInfo')
const isShow = computed(() => data => {
  return permissions.includes(data) || permissions.includes('*:*:*')
})
const dialogVisible = ref(false)
const chartRef = ref('')
const dialogTitle = ref('')
const currentData = ref({})
const timeData = ref({})
const pointName = ref('')
const stationCode = ref()
const defaultData = () => ({
  tem: '',
  pre1h: '',
  visHor10mi: '',
  rhu: '',
  winSAvg10mi: '',
  prs: ''
})

const currentStationData = ref(defaultData())
const stationLoading = ref(false)
const filterActive = ref('TEM')
const currentChartData = ref()
const currentChartType = ref('tem')
const informationList = ref([
  {
    name: '站名',
    value: '太原站'
  },
  {
    name: '经度',
    value: '113.09 '
  },
  {
    name: '纬度',
    value: '38.25'
  }
])
const informationListTwo = ref([])
const chartType = ref([
  {
    name: '气温',
    unit: '℃',
    key: 'TEM',
    detailKey: 'TEM'
  },
  {
    name: '风',
    unit: 'm/s',
    key: 'WIND',
    detailKey: 'WIND'
  },
  {
    name: '湿度',
    unit: '%',
    key: 'RH',
    detailKey: 'RH'
  },
  {
    name: '气压',
    unit: 'hpa',
    key: 'PRs',
    detailKey: 'PRs'
  },
  {
    name: '降水',
    unit: 'mm',
    key: 'RAIN',
    detailKey: 'RAIN'
  },
  {
    name: '能见度',
    unit: 'm',
    key: 'VIS',
    detailKey: 'VIS'
  }
])
const chartOption = ref({
  title: {
    left: 'center',
    top: '10px',
    textStyle: {
      color: '#343434',
      fontSize: '14px',
      fontWeight: '400'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line' // 坐标轴指示器的类型，如 'line', 'shadow', 'cross' 等
    }
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '2%',
    top: '12%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: [],
    position: 'left',
    boundaryGap: false,
    axisTick: {
      show: false // 隐藏X轴刻度
    },
    axisLabel: {
      // 标签格式，这里假设为单纯的数值
      offset: -10, // X轴单位相对于轴线的偏移量，负值向内偏移
      show: true,
      textStyle: {
        color: '#828C99',
        fontSize: 13
      }
    },
    axisLine: {
      lineStyle: {
        color: '#828C99',
        type: 'dashed' // 设置线条为虚线
      }
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: ['0%', '20%'],
    alignTicks: true,
    splitNumber: 5,
    nameTextStyle: {
      color: '#828C99',
      fontSize: 13,
      align: 'left',
      verticalAlign: 'center',
      padding: [0, 0, 0, -30]
    },
    nameGap: 25,
    axisLabel: {
      color: '#828C99',
      fontSize: 13
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#CCD6EB',
        type: 'dashed' // 设置线条为虚线
      }
    }
  },
  series: [
    {
      type: 'line',
      data: [],
      symbol: 'none',
      lineStyle: {
        color: '#00F8FF',
        width: 2
      }
    }
  ]
})
const handleInitData = async data => {
  stationLoading.value = true
  const res = await apiList.getWeatherFactsByStationId({
    stationCode: data.stationCode,
    stationId: data.id
  })
  if (!res.data) return
  informationListTwo.value = [
    {
      name: '降水',
      value: res.data.rainfall ? res.data.rainfall + 'mm' : 0
    },
    {
      name: '相对湿度',
      value:
        res.data.humidity == '999999'
          ? '暂无数据'
          : res.data.humidity
          ? res.data.humidity + '%'
          : 0
    },
    {
      name: res.data.windDirection ? res.data.windDirection : 0,
      value:
        res.data.windSpeed == '999999'
          ? '暂无数据'
          : res.data.windSpeed
          ? res.data.windSpeed + 'm/s'
          : 0
    },
    {
      name: '气温',
      value: res.data.temperature ? res.data.temperature + '℃' : 0
    },
    {
      name: '能见度',
      value:
        res.data.visibility == '999999'
          ? '暂无数据'
          : res.data.visibility
          ? res.data.visibility + 'm'
          : 0
    },
    {
      name: '气压（百帕）',
      value:
        res.data.pressure == '999999'
          ? '暂无数据'
          : res.data.pressure
          ? res.data.pressure + 'hpa'
          : '-'
    }
  ]
  timeData.value = res.data
  stationLoading.value = false
}
const chartLoading = ref(false)
const handleInitChart = async () => {
  chartLoading.value = true
  const res = await apiList.getNearest24HourWeatherFacts({
    elementCode: filterActive.value,
    stationCode: stationCode.value
  })
  if (!res.data) return
  chartOption.value.xAxis.data = []
  res.data.xAxis.forEach(element => {
    chartOption.value.xAxis.data.push(String(element).slice(-2))
  })
  chartOption.value.series[0].data = res.data.yAxis
  chartRef.value.resize()
  chartLoading.value = false
}

const handleStationDialogVisible = (visible, data) => {
  dialogVisible.value = visible
  filterActive.value = 'TEM'
  if (data) {
    handleInitData(data)
    dialogTitle.value = `${data.stationName}（${data.stationCode}）`
    currentData.value = data
    pointName.value = data.stationName
    stationCode.value = data.stationCode
    informationList.value = [
      {
        name: '经度',
        value: Number(data.longitude).toFixed(4)
      },
      {
        name: '纬度',
        value: Number(data.latitude).toFixed(4)
      },
      {
        name: '海拔',
        value: data.altitude + 'm'
      }
    ]

    handleInitChart()
  }
}
const echartsFilter = item => {
  filterActive.value = item.detailKey
  handleInitChart()
}
useEventBus('handleStationDialogVisible').on(handleStationDialogVisible)
const download = async () => {
  let res = await apiList.exportExcel({ stationCode: stationCode.value })
  // 创建Blob对象
  const blob = new Blob([res], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  })

  // 创建临时链接
  const url = window.URL.createObjectURL(blob)

  // 创建a标签并设置相关属性
  const a = document.createElement('a')
  a.href = url
  a.download = `近二十四小时实况-${pointName.value}.xlsx` // 设置下载文件的文件名

  // 触发点击事件，下载文件
  a.click()

  // 清理临时链接
  window.URL.revokeObjectURL(url)
}
const handleDialogClose = () => {
  dialogTitle.value = ''
  currentData.value = {}
  currentChartType.value = 'tem'
  currentStationData.value = defaultData()
  currentChartData.value = []
}
</script>

<style scoped lang="scss">
.dialog-content {
  width: 100%;
  box-sizing: border-box;

  .info {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 39px 0 21px;

    .title {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      line-height: 0px;
      text-shadow: 0px 0px 10px #000c5f;
      text-align: center;
      font-style: normal;
    }

    .time {
      font-weight: 400;
      font-size: 16px;
      color: #dde7ee;
      line-height: 0px;
      text-align: center;
      font-style: normal;
    }
  }
  .dialog-content-echart {
    height: 553px;
    margin-top: 15px;
    .label-title {
      margin-top: 25px;
    }
    .label-title,
    .label-title-two {
      width: 97px;
      height: 31px;
      background: url(../images/label-title.png) no-repeat;
      background-size: 100% 100%;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 31px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 20px;
      margin-left: 3px;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .item-value {
      margin: 25px 0 13px 25px;
      .top-item-value {
        width: 131px;
        height: 42px;
        background: url(../images/contentData.png) no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        padding: 11px 9px;
        box-sizing: border-box;
        margin-right: 19px;
        .spot {
          width: 4px;
          height: 4px;
          background: #a8eaff;
          box-shadow: 0px 0px 6px 1px rgba(0, 193, 255, 0.2);
          border-radius: 3px 3px 3px 3px;
          margin-right: 14px;
        }
        .name {
          font-weight: 400;
          font-size: 14px;
          color: #afd8e5;
          line-height: 0px;
          font-style: normal;
          margin-right: 11px;
          word-wrap: break-word;
        }
        .value {
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 0px;
          font-style: normal;
        }
      }
    }

    .label-title-two {
      width: 150px;
    }
    .content-top {
      width: 100%;
      height: 120px;
      padding: 0 3px;
      box-sizing: border-box;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .top-item {
        width: 125px;
        height: 88px;
        display: inline-block;
        margin-bottom: 5px;
        .left {
          width: calc(100% - 1px);
          float: left;
        }
        .line {
          float: right;
        }
        .icon0,
        .icon1,
        .icon2,
        .icon3,
        .icon4,
        .icon5 {
          width: 27px;
          height: 22px;
          background: url(../images/icon0.png) no-repeat;
          background-size: 100% 100%;
          margin-bottom: 18px;
          margin-left: 25px;
          margin-left: 50%;
          transform: translateX(-50%);
        }
        .icon1 {
          width: 17px;
          background-image: url(../images/icon1.png);
        }
        .icon2 {
          width: 23px;
          background-image: url(../images/icon2.png);
        }
        .icon3 {
          width: 21px;
          background-image: url(../images/icon3.png);
        }
        .icon4 {
          width: 31px;
          background-image: url(../images/icon4.png);
        }
        .icon5 {
          width: 24px;
          background-image: url(../images/icon5.png);
        }
        .value {
          width: 100%;
          text-align: center;
          margin-bottom: 25px;
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          line-height: 20px;
          text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
        }
        .name {
          width: 100%;
          text-align: center;
          font-weight: 400;
          font-size: 14px;
          color: #afd8e5;
          line-height: 10px;
        }
      }
      .line {
        width: 1px;
        height: 32px;
        background-color: #5d6b75;
        margin-top: 50%;
        transform: translateY(-50%);
      }
    }
    .content-tab {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // margin-top: 20px;
      padding: 0 25px;
      box-sizing: border-box;
      .tab-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        div {
          width: 55px;
          height: 28px;
          background: rgba(0, 75, 175, 0.39);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #3f97cf;
          font-weight: 400;
          font-size: 14px;
          color: #9bbfdf;
          line-height: 28px;
          text-align: center;
          font-style: normal;
          margin-right: 4px;
          cursor: pointer;
        }
        .echartsActive {
          width: 71px;
          height: 28px;
          background: url(../images/echartsActive.png) no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
      .tab-right {
        display: flex;
        justify-content: flex-start;
        div {
          width: 28px;
          height: 28px;
          background: rgba(0, 75, 175, 0.39);
          border-radius: 2px 2px 2px 2px;
          border: 1px solid #3f97cf;
          margin-right: 8px;
          cursor: pointer;
          img {
            width: 28px;
            height: 28px;
          }
        }
        div:last-child {
          margin-right: 0;
        }
      }
    }
    .content-echarts {
      width: 100%;
      height: 275px;
    }
  }
  .number-list {
    width: 100%;
    height: 90px;
    background: #f1f1f1;
    border-radius: 4px 4px 4px 4px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;

    .el-row {
      width: 100%;

      .el-col {
        display: flex;
        align-items: center;

        .circle {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #ffffff;
          border-radius: 50%;
          border: 1px solid #317ce2;
          margin-right: 5px;
        }
      }
    }

    p {
      font-size: 16px;
      font-weight: 400;
      color: #343434;
      line-height: 30px;
    }
  }

  .chart {
    width: 100%;
    height: 300px;
    background: #f1f1f1;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #d6d6d6;

    .chart-content {
      width: 100%;
      height: calc(100% - 50px);
    }

    .chart-type {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style>
.custom-dialog {
  background-color: transparent;
  height: 615px;
  background: url(../images/dialog-bag.png) no-repeat;
  background-size: 100% 100%;
}
</style>
